{% load static %}
{% load i18n %}
{% load sitetags %}

<!DOCTYPE html>
{% get_current_language as current_language %}
{% if current_language == 'zh-hans' %}
    <html lang="zh-CN">
{% else %}
    <html lang="en">
{% endif %}

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap-4.5.0/css/bootstrap.min.css' %}">
    {% block head %}{% endblock %}
    <title>{% block title %}{% endblock %}</title>
    <style>
        html{
            height: 100%;
            font-size: 14px;
        }
        body{
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .page-header{
            flex: 0 0 auto;
        }
        .page-content {
            flex: 1 0 auto;
            padding-top: 10px;
            padding-bottom: 20px;
        }
        .page-footer{
            background: #ececec;
            flex: 0 0 auto;
            {#height:60px;#}
        }
    </style>
</head>
<body>
<div class="page-header">
    <nav class="navbar navbar-dark bg-dark">
        {% get_website_title as site_title %}
        <span class="navbar-brand">{{ site_title }}</span>

            <ul class="navbar-nav mr-auto">
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    {% get_cus_available_languages as LANGUAGES %}
                    {% get_current_language as current_language %}
                    <form action="{% url 'set_language' %}" method="post" id="id-language-switcher" hidden>
                        {% csrf_token %}
                    </form>
                    <div class="nav-item dropdown" id="navbar-language-dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbar-lang-dropdown-btn" role="button"
                           data-toggle="dropdown"
                           aria-haspopup="false" aria-expanded="false"><i class="fas fa-globe"></i> {{ current_language | language_name_local }}</a>
                        <div class="dropdown-menu" aria-labelledby="navbar-lang-dropdown-btn">
                            {% for code, name in LANGUAGES %}
                                <button class="language-switcher-item dropdown-item {% if current_language == code %}active{% endif %}" value="{{ code }}">{{ name }}</button>
                            {% endfor %}
                        </div>
                    </div>
                </li>
            </ul>
    </nav>
</div>
    <div class="page-content">
        <div class="container">
        <div class="row">
            <div class="offset-sm-1 col-sm-10 offset-md-2 col-md-8 offset-lg-3 col-lg-6">
                {% if tips_msg %}
                    <div>
                        <div class="alert alert-warning alert-dismissible" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            {{ tips_msg }}
                        </div>
                    </div>
                {% endif %}
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{% trans '完善用户信息，绑定邮箱。' %}</h4>
                        <p>{% trans '第一次从一个新的第三方认证服务认证后，需要通过邮箱把第三方服务的外部用户关联到本服务的内部用户。多个第三方认证账号可以通过同一个邮箱绑定到同一个内部用户，或者用一个新的邮箱注册绑定到一个新内部用户。' %}</p>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="" enctype="multipart/form-data">
                            <p class="text-danger" id="id-email-error-show">{{ form.email.errors.as_text }}</p>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">{{ form.email.label_tag }}</label>
                                <div class="col-sm-10">
                                    {{ form.email }}
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">{{ form.code.label_tag }}</label>
                                <div class="col-sm-5">
                                    {{ form.code }}
                                </div>
                                <div class="col-sm-5">
                                    <button type="button" id="send-code-btn"  class="btn btn-primary">{% trans '发送验证码' %}</button>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">{{ form.name.label_tag }}</label>
                                <div class="col-sm-10">
                                    {{ form.name }}
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">{{ form.org_name.label_tag }}</label>
                                <div class="col-sm-10">
                                    {{ form.org_name }}
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">{% trans '来源:' %}</label>
                                <div class="col-sm-10 col-form-label">{{ provider_display }}</div>
                            </div>

                            <p id="id-tip-text" class="text-danger float-left">{{ form.non_field_errors.as_text }}</p>
                            <div class="clearfix"></div>
                            <button type="submit" class="btn btn-primary float-left">{% trans '提交' %}</button>
                        </form>
                        {% block form_extend %}{% endblock %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
{#    <footer class="page-footer text-center bg-dark text-white">#}
{#        <p class="p-2">Powered by <a target="_blank" href="https://gitee.com/cstcloud-cnic">CSTCloud-CNIC</a></p>#}
{#    </footer>#}
    <script type="text/javascript" src="{% static 'jquery/jquery-3.7.1.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'bootstrap-4.5.0/js/bootstrap.bundle.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'fontawesome-free/js/all.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'sweetalert2/sweetalert2-v11_26.js' %}"></script>
    <script src="{% url 'javascript-catalog' %}"></script>
    <script type="text/javascript" src="{% static 'auth_provider/email_bind.js' %}"></script>

    {% verbatim %}
    <script>
        $(".language-switcher-item").on("click", function () {
            let langValue = $(this).val();
            let form = $("#id-language-switcher");
            let langInput = document.createElement("input");
            langInput.type="text";
            langInput.name="language";
            langInput.value = langValue;
            form.append(langInput);
            form.submit();
        });
    </script>
    {% endverbatim %}
    {% block base-script %}{% endblock %}
</body>
</html>
